{% extends "openvolunteer/base.html" %}

{% block title %}OpenVolunteer | Accueil{% endblock %}

{% block content %}
    <div class="index center">
        <h2>Bienvenue sur OpenVolunteer, dédié à la gestion événementielle des bénévoles.</h2>
        <div>
            <form method="get" id="indexForm" action="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/volunteer/?">
                <table>
                    <tbody>
                        <tr>
                            <td colspan=2>
                                <div>
                                    <input type="text" name="q" size="40" maxlength="255" value="{{ terms }}" id="q">
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                <div>
                                    <span>
                                        <input onclick="changeActionTo('{{ settings.OPENVOLUNTEER_WEB_ROOT }}/volunteer/?')" 
                                               type="submit" value="Bénévoles">
                                    </span>
                                    <span>
                                        <input onclick="changeActionTo('{{ settings.OPENVOLUNTEER_WEB_ROOT }}/event/?')"
                                               type="submit" value="Événement">
                                    </span>
                                </div>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </form>
        </div>
    </div>
    <script type="text/javascript" 
            src="{{ settings.OPENVOLUNTEER_WEB_ROOT }}/files/jquery/plugins/jquery.autocomplete.js">
    </script>
    <script type="text/javascript">
        // Change path of form post accoridng to the used submit button
        function changeActionTo(path) {
            $('#indexForm').attr('action', path);
        }

        // Specify the url for autocompletion in search input
        url = "{{ settings.OPENVOLUNTEER_WEB_ROOT }}/api/volunteer/get/";

        $('#q').autocomplete(url, {
            dataType: 'json',
            // Start search
            minChars: 3,
            // Max items by request
            max: 10,
            // Delay before starting search
            delay: 500,
            // Select or not the first suggestion on tag or return press
            selectFirst: false,
            // Prevent or not the cache
            preventCache: false,
            // What to display in suggestion list
            formatItem: function(data, i, n, value) {
                return value;
            },
            // What to display and get from json result
            parse: function(data) {
                var tab = new Array();
                for (var i = 0; i < data.length; i++) {
                    var res = data[i].fields.firstname + ' ' + data[i].fields.name;
                    var value = data[i].fields.firstname + ' ' + data[i].fields.name;
                    tab[tab.length] = { data: data[i], value: value, result: res };
                }
                return tab;
            }
        });

        // Auto put the focus in search input
        $('#q').focus();
    </script>
{% endblock %}

